<template>
  <div class="timezone-clock" :style="{ width: `${size}px` }">
    <!-- 模拟时钟 -->
    <div class="analog-clock" :style="clockStyle">
      <div class="clock-face">
        <!-- 时钟数字 -->
        <div v-for="hour in 12" :key="hour" class="hour-number" :style="getHourNumberStyle(hour)">
          {{ hour }}
        </div>

        <!-- 时钟指针 -->
        <div class="hand hour-hand" :style="hourHandStyle"></div>
        <div class="hand minute-hand" :style="minuteHandStyle"></div>
        <div class="hand second-hand" :style="secondHandStyle"></div>
        <div class="center-dot" :style="{ backgroundColor: clockColor }"></div>
      </div>
    </div>

    <!-- 时区显示 -->
    <div class="timezone-display" :style="{ color: clockColor }">
      {{ label }}
    </div>

    <!-- 数字时钟 -->
    <div class="digital-clock" v-if="showDigital" :style="{ color: clockColor }">
      {{ formattedTime }}
    </div>
  </div>
</template>

<script setup lang="ts" name="TimezoneClock">
import { ref, computed, onMounted, onBeforeUnmount, type CSSProperties } from 'vue';

const props = defineProps({
  timezone: {
    type: String,
    required: true,
    default: 'UTC'
  },
  label: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 200
  },
  clockColor: {
    type: String,
    default: '#333'
  },
  showDigital: {
    type: Boolean,
    default: false
  }
});

const now = ref(new Date());

// 时钟容器样式
const clockStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
  borderColor: props.clockColor,
  borderWidth: '4px',
  borderStyle: 'solid'
}));

// 指针样式
const hourHandStyle = computed(() => ({
  transform: `rotate(${hourRotation.value}deg)`,
  backgroundColor: props.clockColor
}));

const minuteHandStyle = computed(() => ({
  transform: `rotate(${minuteRotation.value}deg)`,
  backgroundColor: props.clockColor
}));

const secondHandStyle = computed(() => ({
  transform: `rotate(${secondRotation.value}deg)`
}));

// 更新时间
const updateTime = () => {
  const options = {
    timeZone: props.timezone,
    hour12: false
  };
  const timeStr = new Date().toLocaleString('en-US', options);
  now.value = new Date(timeStr);
};

// 计算时钟指针旋转角度
const hourRotation = computed(() => {
  const hours = now.value.getHours() % 12;
  const minutes = now.value.getMinutes();
  return (hours * 30) + (minutes * 0.5);
});

const minuteRotation = computed(() => {
  return now.value.getMinutes() * 6;
});

const secondRotation = computed(() => {
  return now.value.getSeconds() * 6;
});

// 格式化数字时间
const formattedTime = computed(() => {
  const options: Intl.DateTimeFormatOptions = {
    timeZone: props.timezone,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  };
  return new Date().toLocaleTimeString('en-US', options);
});

// 计算小时数字位置
const getHourNumberStyle = (hour: number): CSSProperties => {
  const angle = (hour * 30 - 90) * (Math.PI / 180);
  const radius = props.size * 0.24;
  const x = 50 + Math.cos(angle) * radius * 0.9;
  const y = 50 + Math.sin(angle) * radius * 0.9;
  return {
    position: 'absolute',
    left: `${x}%`,
    top: `${y}%`,
    transform: 'translate(-50%, -50%)',
    color: props.clockColor,
    fontSize: `${props.size / 12}px`,
    fontWeight: 'bold'
  };
};

// 生命周期钩子
onMounted(() => {
  updateTime();
  const timer = setInterval(updateTime, 1000);
  
  onBeforeUnmount(() => {
    clearInterval(timer);
  });
});
</script>

<style scoped>
.timezone-clock {
  display: inline-block;
  margin: 20px;
  text-align: center;
}

.analog-clock {
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.clock-face {
  width: 100%;
  height: 100%;
  position: relative;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 4px;
  height: 30%;
  margin-left: -2px;
  z-index: 3;
}

.minute-hand {
  width: 3px;
  height: 40%;
  margin-left: -1.5px;
  z-index: 2;
}

.second-hand {
  width: 1px;
  height: 45%;
  margin-left: -0.5px;
  background-color: red;
  z-index: 1;
}

.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  z-index: 4;
}

.timezone-display {
  margin-top: 10px;
  font-size: 1.1em;
  font-weight: bold;
}

.digital-clock {
  font-family: 'Courier New', monospace;
  margin-top: 5px;
  font-size: 1em;
}
</style>